import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import BankStrore from './BankStore';
import BankActions from './BankActions';
class App extends Component {

    constructor(){
        super(...arguments);
        BankActions.createAccouct();
        this.state={
            balance:BankStrore.getState()
        }
    }

    componentDidMount(){
        this.storeSubscription=BankStrore.addListener(data=>this.handleStoreChange(data))
    }
    componentWillUnmount(){
        this.storeSubscription.remove();
    }
    handleStoreChange(){
        this.setState({balance:BankStrore.getState()});
    }

    deposit(){
        BankActions.depositIntoAccount(Number(this.refs.ammount.value));
        this.refs.ammount.value='';
    }

    withdraw(){
        BankActions.withdrawFromAccount(Number(this.refs.ammount.value));
        this.refs.ammount.value='';
    }
  render() {
    return (
      <div className="App">
        <header>就测试Flux</header>
          <h1>余额:${(this.state.balance).toFixed(2)}</h1>
          <div className="atm">
              <input type="text" placeholder="输入金额啊" ref="amount"/>
              <br/>
              <button onClick={this.withdraw.bind(this)}>取钱</button>
              <button onClick={this.deposit.bind(this)}>存钱</button>
          </div>
      </div>
    );
  }
}

export default App;
